<template>
  <div class="relative min-h-screen w-full bg-gray-200">
    <nav class="text-base z-50 sticky top-0 bg-white border-gray-200">
      <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
        <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
          <span class="self-center text-2xl font-semibold whitespace-nowrap">LOGO</span>
        </a>
        <button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="navbar-dropdown" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
          </svg>
        </button>
      </div>
    </nav>
    <div class="flex items-center justify-center">
      <div class="container mx-auto mt-20 mb-40" >
        <div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10">
          <h2 class="text-3xl font-bold mb-6 text-center text-gray-900">账号登录</h2>
          <form class="max-w-lg mx-auto w-auto">
            <div class="mb-5">
              <label for="email" class="flex items-center space-x-4 text-sm font-medium text-gray-900">
                <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 18">
                  <path d="M7 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm2 1H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"/>
                </svg>
                用户名
              </label>
              <input type="email" id="email" v-model="data.user" class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"  required>
            </div>
            <div class="mb-5">
              <label for="password" class="flex items-center space-x-4 mb-2 text-sm font-medium text-gray-900 dark:text-white">
                <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
                  <path d="M14 7h-1.5V4.5a4.5 4.5 0 1 0-9 0V7H2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Zm-5 8a1 1 0 1 1-2 0v-3a1 1 0 1 1 2 0v3Zm1.5-8h-5V4.5a2.5 2.5 0 1 1 5 0V7Z"/>
                </svg>
                密码
              </label>
              <input type="password" v-model="data.password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
            </div>
            <div class="flex items-start mb-5">
              <div class="flex items-center h-5">
                <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300" required>
              </div>
              <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">记住我</label>
              <a href="/emaillogin" class="ml-auto text-blue-500  font-medium rounded-lg text-sm sm:w-auto text-center">邮箱验证码登录</a>
            </div>
            <div class="flex flex-col ">
              <a @click="loginUser" class="text-white bg-sky-500 hover:bg-sky-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-32 sm:w-auto mt-2 mb-3 mx-8 px-10 py-2.5 text-center">登录</a>
              <div class="flex space-x-2 ml-32">
                <a href="/ForgetPassword" class="text-blue-500  font-medium rounded-lg text-sm sm:w-auto text-center">忘记密码? |</a>
                <a href="/register" class="text-blue-500 font-medium rounded-lg text-sm sm:w-auto text-center">注册</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <Icp class="fixed bottom-0"/>
  </div>
</template>
<script setup>
import Icp from "@/components/MainPage/Icp.vue";
import {useRouter} from "vue-router";
import message from "view-ui-plus/src/components/message/index.js";
import requests from "../public/request.js";



const router = useRouter()


const data = {
  user: '',
  password: ''
}
function loginUser(){
      requests.login(data).then((res) => {
      console.log(res)
      message.config({
        background: true
      })
      if (res.data.code === 200) {
        //登录成功，跳转页面+消息提示+存储登录用户的数据
        //判断是否是管理员，管理员跳转manager，
        window.localStorage.setItem('token',res.data.data.token)
        if (res.data.data.role.rid===1) {
          router.push("/manager")

        }else {
          router.push("/")  //非管理员跳转index主页
        }
        message.success('登录成功')
      } else {
      //登录失败，消息提示
          message.error(res.data.message)
    }

  });
}

</script>